<template>
  <div>
    <Tabs v-model:active="active" color="#5d98d4" line-width="30%" :ellipsis="false" animated  
    title-inactive-color="#888888" title-active-color="#026cd6" >
      <Tab title-class="tab-title">
        <template  #title>
          <div>
            <Icon name="contact" style="font-weight: bold;" size="13px">
             好 友
          </Icon>
          </div>
        </template>
        <Person/>
      </Tab >
      <Tab title-class="tab-title">
        <template #title>
          <div>
            <Icon name="friends-o" style="font-weight: bold;" size="13px">
              群 聊
          </Icon>
          </div>
        </template>
        <Group />
      </Tab>
    </Tabs>
    <GroupIcon v-if="userInfo.role === 0"/>
  </div>
</template>
<script setup>
import { Tabs, Tab, Icon } from 'vant';
import { ref } from 'vue';
const active = ref(0);
import Person from './person/Person.vue';
import Group from './group/Group.vue';
import GroupIcon from "@/components/add/GroupIcon.vue";
import {Local} from "@/utils/storage";
const userInfo = Local.get('userInfo')
</script>
<style scoped>
.fixed-tabs {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  color: #818181;
}
.tab-title{
  width: 50%;
  color: #5d98d4;
}
</style>
